import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
import { Link } from "expo-router";
import indexApi from "../../api/index";
import useFetchData from "../../hooks/useFetch";
import Course from "../../business-components/course";
import Title from "../../business-components/Title";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useEffect } from "react";
export default function Index() {
  const { data } = useFetchData(indexApi.index);

  useEffect(() => {
    const token = AsyncStorage.getItem("token");

    alert(JSON.stringify(token));
  }, []);
  return (
    <View style={styles.container}>
      <ScrollView>
        <Title text="推荐课程" size="xl" weight="bold" />
        <FlatList
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          keyExtractor={(item) => item.id}
          data={data.recommended}
          renderItem={({ item }) => (
            <Course
              image={item.image}
              name={item.name}
              chaptersCount={item.chaptersCount}
            ></Course>
          )}
        ></FlatList>
        <Title text="热门课程" size="xl" weight="bold" />
        <FlatList
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          keyExtractor={(item) => item.id}
          data={data.likes}
          renderItem={({ item }) => (
            <Course image={item.image} name={item.name}></Course>
          )}
        ></FlatList>
        <Title text="入门课程" size="xl" weight="bold" />
        <FlatList
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          keyExtractor={(item) => item.id}
          data={data.introductory}
          renderItem={({ item }) => (
            <Course image={item.image} name={item.name}></Course>
          )}
        ></FlatList>
      </ScrollView>

      <Link href="/auth/login">查看 Node.js 课程</Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingInline: 8,
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
